/*
 * @Description: 云公交卡充值类型按钮
 * @Author: ziwei.ma
 * @Date: 2019-04-23 15:03:21
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-30 14:01:08
 */
<template>
  <div>
    <div class="flex-h flex-ve recharge-method-wrapper">
      <div
        class="recharge-btn fontsize30"
        @click="changePhone(true)"
        :class="isFastRecharge?'baseColorNoAcitve':'recharge-btn-unactive'"
      >
        <p>快速充值</p>
        <div
          class="border-warpper"
          :class="isFastRecharge?'baseBgColorNoActive':''"
        ></div>
      </div>
      <div
        class="recharge-btn fontsize30"
        @click="changePhone(false)"
        :class="isFastRecharge?'recharge-btn-unactive':'baseColorNoAcitve'"
      >
        <p>手机号充值</p>
        <div
          class="border-warpper"
          :class="isFastRecharge?'':'baseBgColorNoActive'"
        ></div>
      </div>
    </div>
    <!-- 快速充值 -->
    <div
      class="tips fontsize26"
      v-if="isFastRecharge"
    >请选择充值金额</div>
    <!-- 手机号充值 -->
    <div
      class="phone-recharge-wrapper flex-v"
      v-else
    >
      <input
        v-model="phoneNum"
        type="phone"
        placeholder="请在此输入手机号码"
        maxlength="13"
        class="fontsize54"
      >
      <span
        class="fontsize28 "
        :class="this.phoneNum.length === 13?'user-bind-tips':'baseColorNoAcitve '"
      >{{hint}}</span>
    </div>
  </div>
</template>

<script>
import { getUserCanRecharge } from '../api/api.js'
import { USER_NOT_REGISTERED, NON_ACTIVATED_CARD, ACTIVATED_CARD } from '@/constants/PhoneNumberStatus'
export default {
  data() {
    return {
      isFastRecharge: true,
      phoneNum: '', // 输入的手机号码
      hint: '请确认该手机号已经与注册用户绑定' // 输入框下默认提示
    }
  },
  methods: {
    changePhone(active) {
      this.isFastRecharge = active
      if (active === true) {
        // 快速充值,快速充值电话号码置空，watch监听再做一层判断是否印象支付按钮
        this.phoneNum = ''
        this.$emit('setBtnColor', false)
      } else {
        // 手机号充值
        this.$emit('setBtnColor', true)
      }
    },
    userCanRecharge: function (phoneNumber) {
      getUserCanRecharge(phoneNumber).then(result => {
        if (result.userState === USER_NOT_REGISTERED) {
          this.hint = '不是注册用户'
        } else if (result.userState === NON_ACTIVATED_CARD) {
          this.hint = '未开通虚拟公交卡的用户'
        } else if (result.userState === ACTIVATED_CARD) {
          this.hint = '用户绑定姓名(*' + result.userName.substr(1) + ')'
          // 当手机号可通过时，确认支付按钮为蓝色
          this.$emit('setBtnColor', false, result.userCardNo)
        } else {
          this.hint = '用户虚拟卡已冻结'
        }
      }).catch(() => {

      })
    },
    // 获取去掉空格的手机号码
    getPhoneNum() {
      return this.phoneNum.replace(/\s+/g, '')
    }
  },
  watch: {
    // 手机号码输入/复制格式
    phoneNum(newValue, oldValue) {
      if (newValue.length > oldValue.length) {
        this.phoneNum = newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3')
      } else {
        this.phoneNum = this.phoneNum.trim()
      }

      if (this.phoneNum.length === 13) {
        let phoneNumber = this.phoneNum.replace(/\s+/g, '')
        this.userCanRecharge(phoneNumber)
      } else {
        this.hint = '请确认该手机号已经与注册用户绑定'
        // 当选中的按钮为代充时（this.isFastRecharge === false）向外发送按钮颜色为true（不可点击）
        if (this.isFastRecharge === false) {
          this.$emit('setBtnColor', true)
        }
      }
    }
  }
}
</script>

<style scoped>
/* 充值类型选择 */
.recharge-method-wrapper {
  width: 750px;
  height: 90px;
  background: #ffffff;
  margin-bottom: 16px;
}
.recharge-btn > p {
  display: inline-block;
  width: 375px;
  height: 82px;
  text-align: center;
  line-height: 82px;
}
.border-warpper {
  height: 8px;
  width: 100%;
}
/* 按钮未选中 */
.recharge-btn-unactive {
  color: #999999;
}

/* 快速充值 */
.tips {
  height: 80px;
  line-height: 80px;
  color: #999999;
  background-color: #ffffff;
  padding-left: 30px;
}
/* 手机号充值 */
.phone-recharge-wrapper {
  padding: 10px 30px;
  background-color: #ffffff;
}
.phone-recharge-wrapper > input {
  outline: none;
  border: 0;
  margin: 10px 0;
  color: #666666;
}
.phone-recharge-wrapper > input::-webkit-input-placeholder {
  color: #cccccc;
}
/* 用户绑定状态（非默认） */
.user-bind-tips {
  color: #999999;
}
</style>
